import React, { useEffect } from 'react'
import { Terminal } from 'xterm'
// import { WebLinksAddon } from 'xterm-addon-web-links'
import { FitAddon } from 'xterm-addon-fit'

const Xterm = () => {
  useEffect(() => {
    createXshell()
  }, [])
  const createXshell = () => {
    const fitPlugin = new FitAddon()
    let term = new Terminal({
      rendererType: 'canvas', // 渲染类型
      rows: 20, // 行数

      convertEol: true, // 启用时，光标将设置为下一行的开头
      scrollback: 10, // 终端中的回滚量
      disableStdin: false, // 是否应禁用输入。
      //   cursorStyle: 'underline', // 光标样式
      cursorBlink: true, // 光标闪烁
      theme: {
        foreground: '#fff', // 字体
        background: '#060101', // 背景色
      },
    })

    term.open(document.getElementById('terminal'))
    term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
    term.loadAddon(fitPlugin)
    fitPlugin.fit()

    term.prompt = () => {
      term.write('\r\n$Root ')
    }

    // xterm.4.x 输入
    term.onKey((e) => {
      const ev = e.domEvent
      const printable =
        !ev.altKey && !ev.altGraphKey && !ev.ctrlKey && !ev.metaKey
      if (ev.keyCode === 13) {
        // 回车
        term.prompt()
      } else if (ev.keyCode === 8) {
        // 删除
        if (term._core.buffer.x > 5) {
          term.write('\b \b')
        }
      } else if (printable) {
        term.write(e.key)
      }
    })
    term.onData((data) => {
      console.log(data)
    })
    term.focus()
  }
  return <div id="terminal" style={{ width: 800 }}></div>
}

export default Xterm
